<template>
    <el-dialog
        title="查看标注字段"
        width="820px"
        center
        class="formComponent el-dialog-style"
        :show-close="false"
      >
        <el-form label-width="100px">
          <el-form-item label="控件类型">
            <span v-show="formComponent.type"> {{ ControlTypes[formComponent.type]}} </span>
          </el-form-item>
          <el-form-item v-show="formComponent.type" :label="`${ControlTypes[formComponent.type]}标题`">
            <el-input :value="formComponent.name" disabled></el-input>
          </el-form-item>

          <el-row
            v-show="formComponent.data"
            v-for="(item, index) in formComponent.data"
            :key="index"
          >
            <el-col :span="12">
              <el-form-item :label="`选项${index+1}`">
                <el-input :value="item.text" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="`默认值`">
                <el-input :value="item.code" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">关闭</el-button>
        </div>
      </el-dialog>
</template>


<script>
// @ts-nocheck

import {
  ControlTypes,
} from '@/utils/emun';
import {
  formComponentRead
} from '@/api/projectDetail/projectDetail';


export default {
    props: {
        id: [String, Number],
    },
    data(){
        return {
          ControlTypes,
          formComponent: [],
        }
    },
    watch: {
      id: function(id){
        if( !id ) return;  
        this.formComponentRead(id);
      }
    },
    methods:{
      async formComponentRead(id){
        const res = (await formComponentRead(id)).data || {};
        if( res.data ){
          res.data = JSON.parse(res.data);
        }
        if( res.parameter ){
          res.parameter = JSON.parse(res.parameter);
        }
        this.formComponent = res;
      },
      cancel(){
        this.$emit('update:modelValue', false)
      }
    }
}
</script>

<style lang="less" scoped>
.formComponent{
  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    border-color: #E4E7ED;
    color: #999;
    cursor: not-allowed;
  }
  .dialog-footer{
    text-align: right;
  }
}
</style>